import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import Tabs from '@/components/tabs/Index'
import { Button, message, TabPane } from 'ant-design-vue'
import TipsIcon from '@/assets/channel-management/tips-icon.png'
import { ChannelSourceEnum, getKeyToEnum, InsuranceIndemnifyEnum, InsuranceInvokeTypeEnum, InsuranceTypeEnum } from '@/const/enum'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import { addInsureCompany, editInsureCompany, insureCompanyDetail } from '@/api/insCompany'
import router from '@/router'
@Component
export class AboutView extends Render {
    activeName = 'basicInfo'

    id = null as null | number
	
    emailRuleName = '' // 推送规则名称，（保存接口不仅要id还要name）

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '新增保司',
            width: '450px',
            theme: 'dark',
            show: false,
            gutter: 24,
            params: { 
                confirmText:'确定'
            },
            items: {
                fileUrl: {
                    name: '保司Logo',
                    element: 'upload',
                    required: true,
                    params: {
                        text: '选择图片',
                        autoUpload: true,
                        base64: false,
                        suffix: '限500K，支持jpg、png、jpeg',
                        accept: '.png,.jpg,.jpeg',
                    }
                },
                code: {
                    span: 12,
                    name: '保险编码',
                    element: 'input',
                    required: true,
                    width: '500px',
                    params: {
                        maxlength:12
                    }
					
                },
                sourceId: {
                    span: 12,
                    name: '渠道来源',
                    element: 'select',
                    options: getKeyToEnum(ChannelSourceEnum, false, ['系统保司']),
                    params: {},
                    width: '500px'
                },
                name: {
                    span: 12,
                    name: '保司名称',
                    element: 'input',
                    required: true,
                    width: '500px',
                    params: {
                        maxlength:14
                    }
                },
                insureName: {
                    span: 12,
                    name: '保险公司',
                    element: 'input',
                    width: '500px'
                },
                insureType: {
                    span: 24,
                    name: '保险产品',
                    element: 'select',
                    width: '500px',
                    defaultValue: InsuranceTypeEnum.长期保,
                    options: getKeyToEnum(InsuranceTypeEnum, false, ['长期保'])
                },
                insurePlanName: {
                    span: 12,
                    name: '保司方案',
                    element: 'inputs',
                    required: true,
                    width: '500px',
                    placeholder: '请输入保司方案',
                    params: {
                        minNum: 1,
                        maxNum: 10,
                        maxLength:14,
                        disabled: true,
                        disableMinus: true,
                        type: '',
                        tips: <div class="mt-8 text-black-300 text-sm">最多可添加10个保司方案</div>
                    },
                    callback: {
                        change: (event: string[]) => {
							this.formConfig.items!.insurePlanName!.value = event
                        }
                    }
                },
                invokeType: {
                    span: 12,
                    name: '数据对接',
                    element: 'checkboxGroup',
                    width: '500px',
                    options: getKeyToEnum(InsuranceInvokeTypeEnum)
                },
                emailRuleId: {
                    span: 12,
                    name: '推送规则',
                    element:'select',
                    width: '500px',
                    optionsType: 'emailRule',
                    callback: {
                        change: (event: number) => {
                            const name = this.formConfig.items.emailRuleId.options?.find((item) => item.value === event)?.label
                            this.emailRuleName = event ? name : ''
                        }
                    }
                }
            },
            complete: async () => {
                // const data = getModelValue(this.formConfig)
                // console.log(data, 'datadata')
            },
            init: () => {
                initModelValue(this.formConfig)
            },
            cancel: () => {}
        } as FormModalDto
    }

    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    // 提交创建
    async onSubmit() {
        await this.basicForm.validate()
        const data = getModelValue(this.formConfig)
        const { fileUrl, ...otherData } = data
        if (this.id) {
            await editInsureCompany({
                id: this.id as number,
                ...otherData,
                fileUrl: fileUrl?.length ? (Array.isArray(fileUrl) ? fileUrl.join(',') : fileUrl) : '',
                emailRuleName: this.emailRuleName
            })
        } else {
            await addInsureCompany({
                ...otherData,
                fileUrl: fileUrl?.length ? fileUrl.join(',') : '',
                emailRuleName: this.emailRuleName
            })
        }
        message.success('添加成功')
        router.back()
    }

    async initData() {
        const res = await insureCompanyDetail({
            id: this.id as number
        })
        res.insurePlanName = res.insureCompanyPlanList.map(i => i.planName)
        res.emailRuleId = res.ruleId
        initModelValue(this.formConfig, res)
    }

    created() {
        this.basicForm = renderForm(this.formConfig)
        if (this.$route.query?.id) {
            this.id = Number(this.$route.query.id)
            this.initData()
        }
    }

    renderTips() {
        return (
            <div class="mt-8">
                <div class="px-16 py-8 flex bg-[#FFA814] bg-opacity-10 rounded-default">
                    <img src={ TipsIcon } class="w-24 h-24 mr-4" alt="" />
                    <div class="">
                        <div class="text-[#3D3D3D] text-base">
							添加新的保司前请 <span class="text-black-100">【注意以下事项】</span>：
                        </div>
                        <div class="text-black-100 text-base">
							1、请先前往 保险-保险规则 添加您的 保司规则 <span class="text-blue-100 cursor-pointer">点击前往</span>；
                        </div>
                        <div class="text-black-100 text-base">
							2、如有 新的渠道 请前往 渠道管理-渠道保司 添加，如该渠道需 APl数据对接 请在 渠道系统-渠道保司-接口配置 添加配置 <span class="text-blue-100 cursor-pointer">点击前往</span> ；
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    render() {
        return (
            <div class="p-24 h-full">
                <Tabs class="custom-tabs" v-model={this.activeName} >
                    <TabPane tab="保司管理" key="insCompany">
                        <div class="flex flex-col h-full">
                            <div class="flex-1">
                                <div class="flex ">
                                    <div class="w-0.75 h-40 bg-blue-100 "></div>
                                    <div class="w-full h-40 bg-black-400 flex items-center px-3.25">
                                        <div class="text-[text-black-100] text-base font-semibold">新建保司</div>
                                    </div>
                                </div>
                                {this.renderTips()}
                                <div class="pl-11.5 pr-34 min-w-[1200px]">
                                    {this.basicForm.element()}
                                </div>
                            </div>
                            <div class="flex-none flex items-center justify-center">
                                <div class="flex items-center">
                                    <Button size="large" class="mr-12">取消</Button>
                                    <Button size="large" type="primary" onClick={() => { 
                                        this.onSubmit()
                                    } }>确定</Button>
                                </div>
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}

export default toNative<{}, {}>(AboutView)